
<template>
  <van-nav-bar border>
    <template #right>
      <van-popover
        v-model="showPopover"
        placement="bottom-end"
        theme="dark"
        trigger="click"
        :actions="alist"
        @select="onSelect"
      >
        <template #reference>
          <van-icon name="ellipsis" size="22" />
        </template>
      </van-popover>
    </template>
    <!-- 1. 什么都没有 2. 有返回默认 3. 有其他内容   -->
    <template #left>
      <slot>
        <div v-if="!noBack" class="back" @click="goback">
          <van-icon name="arrow-left" />
          <span>返回</span>
        </div>
      </slot>
    </template>
    <template #title>
      <div class="van-ellipsis">
        <span v-html="title"></span>
      </div>
    </template>
  </van-nav-bar>
</template>
  

<script lang="ts" setup>
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  noBack: {
    type: Boolean,
    default: false,
  },
  title: [String, Number],
});
const route = useRoute(); // 路由信息对象
const router = useRouter(); //路由全局对象
const showPopover = ref<boolean>(false);
const actions = ref<Array<ActionType>>([
  {
    text: "发布面试",
    icon: "edit",
    path: "/ms/submit",
    name: "submit",
    disabled: route.name === "submit",
  },
  {
    text: "搜索面试",
    icon: "search",
    path: "/search",
    name: "search",
    disabled: route.name === "search",
  },
  {
    text: "登录注册",
    icon: "user-o",
    path: "/login",
    name: "login",
    disabled: route.name === "login",
  },
  {
    text: "首页",
    icon: "home-o",
    path: "/ms/home",
    name: "home",
    disabled: route.name === "home",
  },
  { text: "扫码", icon: "scan", path: "/scan", name: "scan" },
  { text: "定位", icon: "location-o", path: "/city", name: "city" },
]);

const alist = computed<Array<ActionType>>(() => {
  return actions.value.filter((item) => item.name !== route.name);
});

const goback = (): void => {
  router.go(-1);
};

const onSelect = (action: ActionType) => {
  router.push(action.path);
};
</script>

<style>
.back {
  color: #1989fa;
}

.myhead {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
</style>
  